/*
 * @Title: 宾馆日期选择
 * @Created by: ycq
 */
<template>
	<view class="date-body">
		<IndexHead :config='pageConfig'></IndexHead>
		<view class="date-area">
			<view class="now-date">
				<text class="now-date-label">当前选定日期</text>
				<text class="now-start-date">{{endDate.str}}</text>
				<text class="zhi">至</text>
				<text class="now-end-date">{{startDate.str}}</text>
			</view>
			<view class="calendar">
				<view class="month-area">
					<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
					<view v-if="nowMonth != ortherMonth" style="width: 80upx;height: 80upx;padding-top: 20upx;padding-left: 40upx;" @click="monthAJ(0)">
						<uni-icon type="arrowleft"  style='margin-top: 12upx;' size="20" color="#999999"></uni-icon>
					</view>
					<view  v-if="nowMonth == ortherMonth"  style="width: 80upx;height: 80upx;padding-top: 20upx;padding-left: 40upx;" >
						<uni-icon type="arrowleft" style='margin-top: 12upx;' size="20" color="rgb(228,228,228)"></uni-icon>
					</view>
					<!-- #endif	 -->
					<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
					<view v-if="nowMonth != ortherMonth" style="width: 80upx;height: 50upx;padding-top: 10upx" @click="monthAJ(0)">
						<uni-icon type="arrowleft"  style='margin-left: 30upx;margin-top: 10upx;' size="20" color="#999999"></uni-icon>
					</view>
					<view  v-if="nowMonth == ortherMonth"  style="width: 80upx;height: 50upx;padding-top: 10upx" >
						<uni-icon type="arrowleft" style='margin-left: 30upx;margin-top: 10upx;' size="20" color="rgb(228,228,228)"></uni-icon>
					</view>
					<!-- #endif -->
					<text class="month-text">{{thisYear}}年{{month[nowMonth-1].month}}</text>
					<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
					<view v-if="addNum<11" style="width: 80upx;height: 80upx;padding-top: 20upx" @click="monthAJ(1)">
						<uni-icon type="arrowright" style='margin-top: 40upx;' size="20" color="#999999"></uni-icon>
					</view>
					<view v-if="addNum>=11" style="width: 80upx;height: 80upx;padding-top: 20upx">
						<uni-icon type="arrowright" style='margin-top: 40upx;' size="20" color="rgb(228,228,228)"></uni-icon>
					</view>
					<!-- #endif	 -->
					<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
					<view v-if="addNum<11" style="width: 80upx;height: 50upx;padding-top: 10upx" @click="monthAJ(1)">
						<uni-icon type="arrowright" style='margin-right: 30upx;margin-top: 10upx;' size="20" color="#999999"></uni-icon>
					</view>
					<view v-if="addNum>=11" style="width: 80upx;height: 50upx;padding-top: 10upx">
						<uni-icon type="arrowright" style='margin-right: 30upx;margin-top: 10upx;' size="20" color="rgb(228,228,228)"></uni-icon>
					</view>
					<!-- #endif -->
					
				</view>
				
				<view class="week">
					<view class="week-day"  v-for="(item,index) in weekData" :key='index'>
						<text>{{item.day}}</text>
					</view>
				</view>
				<view class="month">
					<view class="month-day" 
						:class="{'month-day-in':(firstDay.day == index&&firstDay.year == thisYear&&firstDay.mon == addNum)|| (endDay.day == index&&endDay.year == thisYear&&endDay.mon == addNum),
								'month-day-btw':((addNum>firstDay.mon&&addNum<endDay.mon)||(firstDay.mon==endDay.mon&&addNum==endDay.mon&&index>firstDay.day&&index<endDay.day)||(addNum==firstDay.mon&&addNum<endDay.mon&&index>firstDay.day&&endDay.day!=null)||(addNum==endDay.mon&&addNum>firstDay.mon&&index<endDay.day)),
								'start-border':(firstDay.day == index&&firstDay.year == thisYear&&firstDay.mon == addNum),
								'end-border':(endDay.day == index&&endDay.year == thisYear&&endDay.mon == addNum),
								}" 
						v-for="(item,index) in (monthDaysNum[1]+monFirstDay)" 
						:key='index'
						v-on:click='chooseDay(index,addNum,thisYear)'
						>
					
						<view v-if="(firstDay.day == index&&firstDay.year == thisYear&&firstDay.mon == addNum)||(endDay.day == index&&endDay.year == thisYear&&endDay.mon == addNum)" class="day-bg"></view>
						<view class="days-text" >
							<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
							<text v-if="index+1<=monFirstDay" :style="{color:((nowMonth+addNum) == nowMonth&&(index+1)<(thisDay+monFirstDay)?'#999999':'')}"></text>
							<text v-if="index+1>monFirstDay" :style="{color:((nowMonth+addNum) == nowMonth&&(index+1)<(thisDay+monFirstDay)?'#999999':'')}">{{index-monFirstDay+1}}</text>
							<text v-if="firstDay.day == index&&firstDay.year == thisYear&&firstDay.mon == addNum" style="font-size: 24upx;">入住</text>
							<text v-if="endDay.day == index&&endDay.year == thisYear&&endDay.mon == addNum" style="font-size: 24upx;">离店</text>
							<!-- #endif	 -->
							<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
							<text :style="{color:((nowMonth+addNum) == nowMonth&&index<(thisDay+monFirstDay)?'#999999':'')}">{{todayNum(index+1)}}</text>
							<text v-if="firstDay.day == index&&firstDay.year == thisYear&&firstDay.mon == addNum" style="font-size: 24upx;">入住</text>
							<text v-if="endDay.day == index&&endDay.year == thisYear&&endDay.mon == addNum" style="font-size: 24upx;">离店</text>
							<!-- #endif -->
						</view>
					</view>
				</view>
			</view>
			
			<view class="commit-btn" @click="commit">
				确认选择
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		computed:{
			
		},
		data(){
			return{
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:true, //显示页面title
						hasMenu:false,
						maxHead:true,
						pageId:'binguan',
					},
					left:{
						showPos:false,
						img:'/static/pos-home.png' , //左侧图标
						text:'沈阳市', //左侧文字
					},
					mid:{
						title:'日期选择' ,//页面title
						hasSearchMid:false //显示中间搜索框
					},
				},
				firstDay:{
					day:null,
					mon:null,
					year:null,
					
					},
				endDay:{
					day:null,
					mon:null,
					year:null,
					
					},
				lastMonDays:null,
				thisYear:null,
				thisDay:0,
				backPage:0,
				nowMonth:9,
				addNum:0,
				startDate:{
					day:null,
					mon:null,
					year:null,
					str:'',
					},
				endDate:{
					day:null,
					mon:null,
					year:null,
					str:''
					},
				monFirstDay:0,
				monthDaysNum:[0,0,0,0],
				nextMonth:'',
				ortherMonth:null,
				month:[{month:'一月'},{month:'二月'},{month:'三月'},{month:'四月'},{month:'五月'},{month:'六月'},{month:'七月'},{month:'八月'},{month:'九月'},{month:'十月'},{month:'十一月'},{month:'十二月'}],
				weekData:[{day:'日'},{day:'一'},{day:'二'},{day:'三'},{day:'四'},{day:'五'},{day:'六'}],
				data:{},
			}
		},
		methods: {
			chooseDay(index,addNum,year){
			
				if(!this.checkDay(index)){
					return
				}
				if(this.firstDay.day !=null && this.endDay.day !=null){ //第一天和最后一天都不是空
					
					this.firstDay.day = index
					this.firstDay.mon = addNum
					this.firstDay.year = year
					uni.showToast({
						title: '请选择结束时间',
						icon:'none',
						duration: 1000
					});
					this.sDate(year,addNum,index)
					this.endDay.day = null
					this.endDay.mon = null
					this.endDay.year = null
					this.eDate(null,null,null)
					return
				}
				if(this.firstDay.day == null){ //第一天是空
					uni.showToast({
						title: '请选择结束时间',
						icon:'none',
						duration: 1000
					});
					this.firstDay.day = index
					this.firstDay.mon = addNum
					this.firstDay.year = year
					this.sDate(year,addNum,index)
					// this.firstDay.day = index
					return
				}
				if(this.firstDay.day !=null && (index == this.firstDay.day&&this.firstDay.mon==addNum)){ // 第一天非空并且再次点击第一天
					this.firstDay.day = null
					this.firstDay.mon = null
					this.firstDay.year = null
					this.sDate(null,null,null)
					return
				}
				if(this.endDay.day !=null && (index == this.endDay.day&&this.endDay.mon==addNum)){ // 最后一天非空并且再次点击最后一天(重选结束日期)
					
					this.endDay.day = null
					this.endDay.mon = null
					this.endDay.year = null
					this.eDate(null,null,null)
					return
				}
				
				if(this.firstDay.day !=null && index < this.firstDay.day){ //开始日期不为空  点击小于开始日期
					if( addNum<=this.firstDay.mon){
						uni.showToast({
							title: '请选择结束时间',
							icon:'none',
							duration: 1000
						});
						this.firstDay.day = index
						this.firstDay.mon= addNum
						this.firstDay.year = year
						this.sDate(year,addNum,index)
					}else{
						this.endDay.day = index
						this.endDay.mon = addNum
						this.endDay.year = year
						this.eDate(year,addNum,index)
					}
					return
				}
				if(this.firstDay.day !=null && index > this.firstDay.day){
					if(addNum>=this.firstDay.mon){
						this.endDay.day = index
						this.endDay.mon = addNum
						this.endDay.year = year
						this.eDate(year,addNum,index)
					}else{
						this.firstDay.day = index
						this.firstDay.mon = addNum
						this.firstDay.year = year
						this.sDate(year,addNum,index)
					}
					return
				}
			
			},
			commit(){
				this.$store.commit('showXcTypeUpdate',true)
				if(this.startDate.str!=''){
					this.$store.commit('startTimeUpdate',this.startDate)
				}
				if(this.endDate.str!=''){
					this.$store.commit('endTimeUpdate',this.endDate)
				}
				console.log(111)
				if(this.backPage==0){
					uni.navigateBack({
						delta:1
					})
				}else{
					uni.navigateTo({
						url:'/pages/home/hotel/order'
					})
				}
				// uni.navigateBack({
				// 	delta:1
				// })
			},
			isLeapYear(year){
				if (year % 100 == 0 && year % 400 == 0){
					return true;
				}else if (year % 100 != 0 && year % 4==0){
					return true;
				}
				return false;
			},
			monthAJ(type){
				if(type == 0){
					if(this.nowMonth-1>0){
						this.nowMonth-- 
					}else if(this.nowMonth-1 == 0 ){
						this.nowMonth = 12
						this.thisYear--
					}
					if(this.addNum>0){
						this.addNum--
					}
				}else if(type == 1){
					if(this.nowMonth-1<11){
						
						this.nowMonth++ 
					}else if(this.nowMonth-1 == 11 ){
						this.nowMonth = 1
						this.thisYear++
					}
					this.addNum++
				}
				this.jisuan()
			},
			sDate(year,mon,day){
				if(year!=null&&mon!=null&&day!=null){
					
					// #ifdef APP-PLUS|| MP-WEIXIN
						this.startDate.day = day-this.monFirstDay+1
					// #endif
					// #ifndef APP-PLUS|| MP-WEIXIN
						this.startDate.day = day-this.monFirstDay+1
					// #endif
					
					if(this.nowMonth>12){
						
						this.startDate.mon = this.nowMonth%12
						this.startDate.year = year+1
					}else{
						this.startDate.mon = this.nowMonth
						this.startDate.year = year
					}
					this.startDate.str = this.startDate.year+'-	'+this.startDate.mon+'-	'+this.startDate.day
				}else{
					this.startDate.day = null
					this.startDate.mon = null
					this.startDate.year = null
					this.startDate.str = '未选择'
				}
				
			},
			eDate(year,mon,day){
				if(year!=null&&mon!=null&&day!=null){
					// #ifdef APP-PLUS|| MP-WEIXIN
						this.endDate.day = day-this.monFirstDay+1
					// #endif
					// #ifndef APP-PLUS|| MP-WEIXIN
						this.endDate.day = day-this.monFirstDay+1
					// #endif
					
					if(this.nowMonth>12){
						this.endDate.mon = this.nowMonth%12
						
						this.endDate.year = year+1
					}else{
						this.endDate.mon = this.nowMonth
						this.endDate.year = year
					}
					this.endDate.str = this.endDate.year+'-	'+this.endDate.mon+'-	'+this.endDate.day
				}else{
					this.endDate.day = null
					this.endDate.mon = null
					this.endDate.year = null
					this.endDate.str = '未选择'
				}
			},
			jisuan(){
				var nowDate = new Date();
				var date = {
				    year: nowDate.getFullYear(),
				    month: nowDate.getMonth() + 1,
				    date: nowDate.getDate(),
				    }
				var _thisMon = date.month+this.addNum
				if(_thisMon>12){
					_thisMon = _thisMon-12
					var myDate = new Date(Date.parse((date.year+1)+'/'+_thisMon+'/1'));  
					this.monthDaysNum[1] = this.monthDayNum(_thisMon,date.year+1)
				}else{
					var myDate = new Date(Date.parse(date.year+'/'+_thisMon+'/1'));  
					this.monthDaysNum[1] = this.monthDayNum(_thisMon,date.year)
				}
				
				this.monFirstDay = myDate.getDay()
			},
			todayNum(index){
				if(index<=this.monFirstDay){
					// return 30-(this.monFirstDay-index)
					return null
				}else{
					return index-this.monFirstDay
				}
			},
			checkDay(index){
				console.log('index:'+index)
				console.log('thisDay:'+this.thisDay)
				console.log('monFirstDay:'+this.monFirstDay)
				if(this.nowMonth+this.addNum == this.nowMonth){
					if((index<(this.thisDay+this.monFirstDay))||index<this.monFirstDay+1){
						console.log(false)
						return false
					}else{
						console.log(true)
						return true
					}
				}else{
					if(index<this.monFirstDay+1){
						return false
					}
					console.log(true)
					return true
				}
			},
			monthDayNum(month,year){
				var days=0;
				
				if(month=='1'||month==3||month==5||month==7||month==8||month=='10'||month==12){
					days = 31
				}else if(month==4||month==6||month==9||month==11){
					days = 30
				}else if(month == 2){
					if(this.isLeapYear(year)){
						days = 29
					}else{
						days = 28
					}
				}
				return days;
			},
			tranCHD(num){
				switch (num){
					case 1:
						return '一月'
						break;
					case 2:
						return '二月'
						break;
					case 3:
						return '三月'
						break;
					case 4:
						return '四月'
						break;
					case 5:
						return '五月'
						break;
					case 6:
						return '六月'
						break;
					case 7:
						return '七月'
						break;
					case 8:
						return '八月'
						break;
					case 9:
						return '九月'
						break;
					case 10:
						return '十月'
						break;
					case 11:
						return '十一月'
						break;
					case 12:
						return '十二月'
						break;
					default:
						break;
				}
			}
		},
		created(){
            var nowDate = new Date();
            var date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate(),
                }
				this.thisYear = date.year
				this.nowMonth = date.month
				this.ortherMonth = date.month
				
				this.monthDaysNum[1] = this.monthDayNum(date.month,nowDate.getFullYear())
				this.nextMonth = this.tranCHD(nowDate.getMonth()+2);
				var myDate = new Date(Date.parse(date.year+'/'+date.month+'/1'));  
				this.lastMonDays = 31 - myDate.getDay()
				this.thisDay = date.date
				this.monFirstDay = myDate.getDay()
				
		},
		components: {
			uniIcon
		},
		watch:{
			startDate(){
				if(this.startDate.str=''){
					
				}
			}
		},
		onLoad(op) {
			if(op.pageFrom=='hotel'){
				this.backPage = 0
			}else{
				this.backPage = 1
			}
		}
	}
</script>

<style scoped>
	.date-body{
		width: 750upx;
		height: auto;
		display: table;
		margin-bottom: 150upx;
	}
	
	.date-area{
		width: 668upx;
		height: 1000upx;
		background: #FFFFFF;
		position: absolute;
		top: 187upx;
		left:41upx;
		border-radius: 20upx;
	}
	.now-date{
		width: 100%;
		height: 60upx;
		margin-top: 20upx;
		line-height: 60upx;
	}
	.now-date-label{
		font-size:28upx;
		float: left;
		margin-left: 30upx;
	}
	.now-start-date{
		font-size:28upx;
		color:#54B0FF;
		float: right;
		margin-right: 30upx;
	}
	.zhi{
		font-size:28upx;
		float: right;
		margin-right: 30upx;
	}
	.now-end-date{
		font-size:28upx;
		color:#54B0FF;
		float: right;
		margin-right: 30upx;
	}
	.calendar{
		width: 100%;
		margin-top: 60upx;
		height: 600upx;
	}
	.month-area{
		width: 100%;
		display: flex;
		height: 80upx;
		flex-direction: row;
		justify-content: space-between;
	}
	.month-text{
		line-height: 80upx;
		text-align: center;
		font-size: 32upx;
		font-weight: bold;
	}
	.week{
		width: 630upx;
		height: 60upx;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: row;
		margin-top: 40upx;
		justify-content:  flex-start;
	}
	.week-day{
		width: 90upx;
		margin: 10upx 0upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
		font-size: 28upx;
	}
	
	.month{
		width: 630upx;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: row;
		margin-top: 40upx;
		flex-wrap:wrap;
		justify-content: flex-start;
		
	}
	.month-day{
		width: 90upx;
		margin: 10upx 0upx;
		height: 60upx;
		text-align: center;
		display: flex;
		flex-direction: column;
		font-size: 28upx;
	}
	.month-day  text{
		line-height: 60upx;
	}
	.day-bg{
		width: 92upx;
		margin-top: -2upx;
		margin-left: -2upx;
		height: 62upx;
		border-radius: 10upx;
		position: absolute;
		background: rgba(84,176,255,1.00);
	}
	.days-text{
		width: 90upx;
		margin-top: -2upx;
		height: 60upx;
		text-align: center;
		display: flex;
		flex-direction: column;
		position: absolute;
	}
	.month-day-in{
		width: 88upx;
		border: rgba(87,122,255,1.00) inset 1upx;
		margin: 10upx 0upx;
		/* display: block; */
		height: 58upx;
		color: #FFFFFF;
		text-align: center;
		border-radius: 10upx 0 0 10upx;
	}
	.month-day-in  text{
		font-size: 28upx;
		line-height: 30upx;
	}
	.month-day-btw{
		width: 88upx;
		border: rgba(87,122,255,1.00) inset 1upx;
		border-left: none;
		border-right: none;
		margin: 10upx 0upx;
		height: 58upx;
		text-align: center;
		line-height: 60upx;
		font-size: 28upx;
		color: rgba(254,152,10,1.00)
	}
	.start-border{
		border-radius: 10upx 0 0 10upx;
		border-right: none;
	}
	.end-border{
		border-radius: 0 10upx 10upx 0;
		border-left: none;
	}
	.commit-btn{
		width: 380upx;
		height: 72upx;
		border-radius: 30upx;
		position: absolute;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		bottom: 30upx;
		font-size: 28upx;
		text-align: center;
		line-height: 72upx;
		color: #FFFFFF;
		left:144upx
	}
</style>
